<template>
  <div class="header">
    <div class="lcontent">
      <el-button size="mini" icon="el-icon-menu" plain @click="changeAside()"></el-button>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
        v-for="(item,index) in tags"
        :key="index"
        :to="{ 'name': item.name }">
          {{item.label}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="rcontent">
      <el-dropdown size="mini" >
        <el-avatar> user </el-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout()">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name:'Header',
  computed:{
    ...mapState('tagOptions',['tags'])
  },
  methods:{
    // 收缩展开侧边栏
    changeAside(){
      this.$store.dispatch('asideOptions/changeCollapse')
    },
    logout(){
      this.$store.commit('asideOptions/CLEARMENU')
      this.$store.commit('userOptions/CLEARTOKEN')
      // 跳转路由
      this.$router.push({name:'login'})
    }
  }
}
</script>

<style lang="less" scoped>
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  .lcontent{
    min-width: 100px; 
    .el-button{
      float: left;
    }
    .el-breadcrumb{
      margin-top: 10px;
      margin-left: 25px;
      float: left;
    }
  }
}
</style>
